<script setup lang='ts'>
import { addEnterPriseAPI, uploadFileAPI } from '@/apis';
import { useIndustry } from '@/composition/enterprise';
import router from '@/router';
import type { EnterpriseDetail } from '@/types/enterprise';
import { ElMessage, type FormInstance, type FormRules, type UploadRawFile, type UploadRequestOptions } from 'element-plus';
import { ref } from 'vue';

       
const { IndustryList } = useIndustry() // 使用行业数据


// 检查上传
const checkUpload = (file: UploadRawFile) => {
    // B-Byte Dance 
    if (file.size > 2 * 1024 * 1024) {
        ElMessage({
            message: '营业执照大小不能超过5M',
            type: 'warning'
        })
        return Promise.reject(new Error("营业执照大小不能超过5M"))
    }
    return Promise.resolve() // 成功

}

// 上传方法

const uploaFile = async (params: UploadRequestOptions) => {
    // 上传采用的是formData
    const data = new FormData()
    data.append("file", params.file) // 给formData类型添加参数
    data.append("type", "businessLicense") // 上传的文件类型
    const result = await uploadFileAPI(data)
    addForm.value.businessLicenseUrl = result.url // 把上传的地址和id赋值给表单的数据
    addForm.value.businessLicenseId = result.id
}

// 表单ref对象
const formRef = ref<FormInstance | null>(null)
// 表单数据
const addForm = ref<EnterpriseDetail>({
    name: "",
    legalPerson: "",
    registeredAddress: "",
    industryCode: 0,
    businessLicenseUrl: "",
    businessLicenseId: 0,
    contact: "",
    contactNumber: ""
})
// const rules: FormRules<EnterpriseDetail>
// const rules: FormRules<typeof addForm>
const rules: FormRules<EnterpriseDetail> = {
    name: [{
        required: true,
        message: '请输入企业名称',
        trigger: 'blur'
    }],
    legalPerson: [{
        required: true,
        message: '请输入法人',
        trigger: 'blur'
    }],
    registeredAddress: [{
        required: true,
        message: '请输入公司注册地址',
        trigger: 'blur'
    }],
    industryCode: [{
        required: true,
        message: '请选择所在行业',
        trigger: 'blur'
    }],
    businessLicenseUrl: [{
        required: true,
        message: '请上传营业执照',
        trigger: 'blur'
    }],
    contact: [{
        required: true,
        message: '请输入企业联系人',
        trigger: 'blur'
    }],
    contactNumber: [{
        required: true,
        message: '请输入联系人电话',
        trigger: 'blur'
    }, {
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号格式不正确',
        trigger: 'blur'
    }
    ]
}

const addEnterPrise = async () => {
    await formRef.value?.validate()
    await addEnterPriseAPI(addForm.value)
    ElMessage({
        message: '新增企业成功',
        type: 'success'
    })
    // 返回
    router.push("/park/enterprise")
}

const reset = () => {
    formRef.value?.resetFields()
}

</script>
       
<template>
    <el-container class="container">
        <el-header class="header">
            <el-row class="header-row" align="middle" type="flex" justify="space-between">
                <el-col :span="4">
                    <span class="header-icon" @click="router.push('/park/enterprise')">
                        <el-icon color="#000" :size="20">
                            <Back />
                        </el-icon>
                        返回
                    </span>
                    <span class="divider">|</span>
                    <span>添加企业</span>
                </el-col>
                <span>黑马管理员</span>
            </el-row>
        </el-header>
        <el-main class="main">
            <el-form ref="formRef" :rules="rules" :model="addForm" inline label-width="100px">
                <el-card shadow="never" class="add_card_top">
                    <span class="title">企业信息</span>
                    <div class="form-container">
                        <el-row class="form-row-container">
                            <el-col :span="12">
                                <el-form-item prop="name" class="form-item-container" label="企业名称">
                                    <el-input v-model="addForm.name" placeholder="请输入企业名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="legalPerson" class="form-item-container" label="法人">
                                    <el-input v-model="addForm.legalPerson" placeholder="请输入法人"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row-container">
                            <el-col :span="12">
                                <el-form-item prop="registeredAddress" class="form-item-container" label="注册地址">
                                    <el-input v-model="addForm.registeredAddress" placeholder="请输入注册地址"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="industryCode" class="form-item-container" label="所在行业">
                                    <el-select v-model="addForm.industryCode" placeholder="请选择所在行业">
                                        <el-option v-for="item in IndustryList" :key="item.industryCode"
                                            :label="item.industryName" :value="item.industryCode"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="form-row-container">
                            <el-col :span="12">
                                <el-form-item prop="businessLicenseUrl" class="form-item-container" label="营业执照">
                                    <el-upload :http-request="uploaFile" :before-upload="checkUpload" accept="image/*">
                                        <span class="upload-title">
                                            <el-icon>
                                                <Upload />
                                            </el-icon>
                                            上传文件
                                        </span>
                                    </el-upload>
                                    <span style="color: #8c8c8c">支持扩展名：.png,jpg,jpeg，文件大小不超过5M</span>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </div>

                </el-card>
                <el-card shadow="never" class="add_card_bottom">
                    <span class="title">联系人信息</span>
                    <div class="form-container">
                        <el-row class="form-row-container">
                            <el-col :span="12">
                                <el-form-item prop="contact" class="form-item-container" label="企业联系人">
                                    <el-input v-model="addForm.contact" placeholder="请输入企业联系人"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="contactNumber" class="form-item-container" label="联系电话">
                                    <el-input v-model="addForm.contactNumber" placeholder="请输入联系电话"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                </el-card>

            </el-form>
        </el-main>
        <el-footer class="footer">
            <el-row class="footer-row" type="flex" justify="center" align="middle">
                <el-button @click="reset()">重置</el-button>
                <el-button type="primary" @click="addEnterPrise">确定</el-button>
            </el-row>
        </el-footer>
    </el-container>
</template>
       
<style scoped>
       .container {
            height: 100vh;
            width: 100vw;
            background-color: #f4f6f8;
            .header, .footer {
                height: 80px;
                width: 100%;
                background-color:#ffffff;
            }
       }
       .header {
            .header-row {
                width: 100%;
                height: 100%;
                .divider {
                    margin: 0 10px;
                }
            }
       }

       .main {
        padding: 30px 120px;

        .add_card_top,
        .add_card_bottom {
            width: 100%;


            .title {
                border-left: 3px solid #506ff6;
                padding-left: 10px;
                margin-left: -20px;
                display: block;
            }

            .form-container {
                padding: 10px 80px;

                .form-row-container {
                    height: 60px;
                }

                .form-item-container {
                    width: 90%;
                }
            }
        }

        .add_card_bottom {
            margin-top: 30px;
        }

    }

       .footer {
            .footer-row {
                width: 100%;
                height: 100%;
            }
       }

        .header-icon {
                cursor: pointer;
                user-select: none;

                .el-icon {
                    vertical-align: sub;
                }
            }
</style>